<template>
    <div class="wrapper">
        <top-bar class="top-bar" :background-color="'#232830'" :icon-color="'white'">
            <template #title>
                {{cardName}}
            </template>
        </top-bar>
        <abnormal-page v-if="pageError" @retry="getData"></abnormal-page>
        <div v-else class="container">
            <div class="header">
                <div class="balance">
                    <div class="title">{{$t('Balance')}}</div>
                    <div class="content">
                        <div class="coin-num">{{vueState.pageInfo.totalCoin}}</div>
                        <div class="record" @click="goWithdrawHistory">{{$t('Record')}}</div>
                    </div>
                    
                </div>
                <div :class="['gift-card',`${channelInfo?.type}`]">
                    <div class="main">
                        <div
                            class="text"
                            v-if="whileTypeList.indexOf(channelInfo?.type) == -1"
                            :style="{
                                left: cardName.indexOf('Flip') >= 0 ? '0.36rem' : '1.38rem',
                            }"
                            >
                            <span> {{ vueState.countryInfo.currencySymbol }}</span
                            >{{ activeItem?.money }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="options">
                    <div class="title">{{$t('Please select denomination')}}</div>
                    <div class="options-list">
                        <div v-for="(item,index) in rates" :key="index" :class="['options-list-item',{active:active === index}]" @click="selectItem(index)">
                            <div class="main">
                                <span class="sign">{{vueState.countryInfo.currencySymbol}}</span>{{item.money}}
                            </div>
                            <div class="footer">
                                <div class="coin-num">{{item.coin}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rules">
                    <!-- //to:langlang -->
                    <div class="title">{{$t('Rule description')}}:</div>
                    <div class="main" v-if="channelInfo?.type == 'americanas'">
                            <div>1.O cartão Americanas só pode ser trocado por 100 reais ou mais.2.O cartão-presente será enviado para seu e-mail em no máximo 48 horas.3.O cartão-presente precisa ser transferido para Americanas.cn para resgate e compras;</div>
                    </div>
                    <div class="main" v-else-if="channelInfo?.type == 'centauro'">
                        <div>1.O cartão Centauro só pode ser trocado por 100 reais ou mais.2.O cartão-presente será enviado para seu e-mail em no máximo 48 horas.3.O cartão-presente precisa ser transferido para Centauro.cn para resgate e compras</div>
                    </div>
                    <div class="main" v-else-if="channelInfo?.type == 'rewardLink'">
                        <div>1.Here you can redeem Amazon Gift Cards, Google Gift Cards, Nike and mor.To use Reward Link, simply click the redemption URL and on the reward catalog landing page proceed to select incentives or rewards up to your balance limit and add them to your cart. When you check out, enter the name and email address for the delivery of the reward(s) (your email address may be shown by default, but you may change it at your discretion)</div>
                        <div>2.  - Any unused balance will remain available to you after Reward delivery using the same Reward Link; please save the Reward email containing your Reward Link for such future use. Please note that your Reward Link has an expiration date for usage. The expiration date will be clearly stated in the Enterprise email containing the Reward Link. Multiple Reward Links will need to be redeemed separately as they cannot be combined.
            - Please note that the Reward Link is “active” when you receive it. You are solely responsible for the security of the Reward Link after receipt</div>
                    </div>
                    <div v-else class="main">
                        <div>1.{{$t('$m cards can only be exchanged for more than 100 rupees',[{msg:'$m',val:cardName}])}};</div>
                        <div>2.{{$t('The gift card will be sent to your email within 48 hours at the earliest')}};</div>
                        <div>3.{{$t(rulesMap[cardName])}}</div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="button" :style="{bottom:.32 * fsize + (vueState.pageStyle.tabBarHeight || 0) + 'px'}" @click="submit">{{$t('Buy Now')}}</div>
            </div>
        </div>
        <gift-card-modal v-model:show="GiftCardModalData.show" @submit="GiftCardModalData.submit"></gift-card-modal>
        <failure-modal v-model:show="failureModalData.show"/>
    </div>
</template>
<script>
import GiftCardModal from '../../components/Modal/GiftCardModal.vue'
import FailureModal from './modal/failureModal.vue'
// import {useGiftCard} from './hooks/useGiftCard.js'
import {useGiftCard} from '@@/hooks/Withdraw/useGiftCard.js'
import { inject, onMounted, toRefs } from 'vue'
export default {
    components:{
        GiftCardModal,
        FailureModal
    },
    props:{
        channel:{
            default:'{}'
        }
    },
    setup(props) {
        const vueState = inject('vueState')
        const whileTypeList = ['americanas', 'centauro', , 'rewardLink']
        const {state,selectItem,getData,activeItem,submit,GiftCardModalData,channelInfo,cardName,failureModalData,goWithdrawHistory,rulesMap} = useGiftCard()
        
        onMounted(()=>{
            window.trackEvent({pageTitle:`${channelInfo.value?.type}Page`,ev:'showPage'})
            vueState.EventEmitter.immediately('afterRegist',getData,vueState.pageStatus.afterRegist)
        })
        return {
            ...toRefs(state),
            selectItem,
            getData,
            activeItem,
            vueState,
            submit,
            GiftCardModalData,
            channelInfo,
            cardName,
            failureModalData,
            goWithdrawHistory,
            whileTypeList,
            rulesMap
        }
    }
}
</script>
<style lang="less" scoped>
.coin-num {
	background: url(../../assets/images/icon_coin.svg) no-repeat left center;
}
.wrapper {
	height: 100%;
	.top-bar {
		color: white;
		box-shadow: 0px 8px 16px 0px rgba(10, 36, 99, 0.02);
	}
	.container {
		height: 100%;
		overflow-y: auto;
		padding-bottom: 0.88rem;
		& > .header {
			.balance {
				padding:.14rem .16rem .5rem .26rem;
				background: url(../../assets/images/gifts_bg.png) no-repeat
					center center;
				background-size: 100%;
				height: 1.85rem;
				.title {
					font-size: 0.14rem;
					color: rgba(255, 255, 255, 0.72);
					line-height: 0.18rem;
				}
				.content{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: .1rem 0 .16rem;
                }
				.coin-num {
					margin: 0.1rem 0 0.16rem;
					background-size: 0.24rem 0.24rem;
					padding-left: 0.28rem;
					font-size: 0.24rem;
					font-weight: bold;
					color: white;
					line-height: 0.32rem;
				}
				.record{
                    font-size: .16rem;
                    font-weight: 700;
                    color: white;
                    line-height: .2rem;
                    background: url(../../assets/images/withdraw_record_icon.png) no-repeat left center;
                    background-size:.18rem .18rem;
                    padding-left: .22rem;
                }
			}
			.gift-card {
				margin: -0.85rem 0.02rem 0;
				height:  2.08rem;
				background: url(../../assets/images/gift_card_bg.png) no-repeat
					center;
				background-size: contain;
				&.amazon{
                    background-image: url(https://dl.b6ad8.xyz/yowin/imgs/bg_giftcard/bg_giftcard_amazon.png);
                    &>.main{
                        color: white;
                    }
                }
                &.googlePlay{
                    background-image: url(https://dl.b6ad8.xyz/yowin/imgs/bg_giftcard/bg_giftcard_google.png);
                    &>.main{
                        color: white;
                    }
                }
                &.americanas{   //to:langlang
                    background-image: url(https://dl.b6ad8.xyz/yowin/imgs/bg_giftcard/bg_giftcard_americanas.svg);
                    &>.main{
                        color: white;
                    }
                }
                &.centauro{
                    background-image: url(https://dl.b6ad8.xyz/yowin/imgs/bg_giftcard/bg_giftcard_centauro.svg);
                    &>.main{
                        color: white;
                    }
                }
                &.rewardLink{
                    background-image: url(https://dl.b6ad8.xyz/yowin/imgs/bg_giftcard/bg_giftcard_rewardlink.svg);
                    &>.main{
                        color: white;
                    }
                }
				& > .main {
					height: 1.65rem;
					font-size: 0.48rem;
					font-weight: bold;
					position: relative;
					color: #312622;
					.fc();
					.text {
						position: absolute;
						top: 0.51rem;
						left: 1.46rem;
						line-height: 0.64rem;
					}
				}
			}
		}
		& > .main {
			margin-top: -.22rem;
			padding: 0 0.16rem;
			.title {
				font-size: 0.18rem;
				font-weight: bold;
				line-height: 0.3rem;
				color: #121314;
			}
			.options {
				&-list {
					margin-top: 0.16rem;
					.xb();
					&-item {
						width: 47.6%;
						height: 1.16rem;
						border-radius: 0.08rem;
						border: 0.02rem solid transparent;

						&.active {
							border-color: @theme-color;
							.footer {
								background-color: @theme-color;
								color: white;
							}
						}
						.main {
							border-radius: 0.08rem 0.08rem 0 0;
							color: @theme-color;
							background-color: #f5f6f9;
							font-size: 0.24rem;
							font-weight: bold;
							.fc();
							height: 62%;
							.sign {
								margin-right: 0.06rem;
							}
						}
						.footer {
							border-top: 0.01rem solid #ededef;
							height: 38%;
							border-radius: 0 0 0.06rem 0.06rem;
							background-color: rgba(0, 0, 0, 0.04);
							color: @theme-color;
							font-size: 0.22rem;
							font-weight: bold;
							.fc();
							.coin-num {
								padding-left: 0.28rem;
								background-size: 0.24rem 0.24rem;
								line-height: 0.3rem;
							}
						}
					}
				}
			}
			.rules {
				margin-top: 0.28rem;
				.main {
					font-size: 0.12rem;
					line-height: 0.2rem;
					color: #9c9da6;
					margin-top: 0.12rem;
					& > div {
						margin-top: 0.08rem;
						&:first-child {
							margin-top: 0;
						}
					}
				}
			}
		}
		& > .footer {
			.button {
				.unique-button();
				font-size: 0.16rem;
				width: calc(100% - 0.32rem);
				height: 0.46rem;
				position: fixed;
				// bottom: .32rem;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}
</style>